<template>
  <div style="height:100%;">
    <div style="padding: 10px 16px 0;  display: flex; align-items: center; ">
      <el-button
        size="mini"
        type="plain"
        @click="download"
        :disabled="batchFile.loading"
        :icon="batchFile.loading ? 'el-icon-loading' : 'el-icon-download'"
      >
        {{ batchFile.loading ? '下载中....' : '下载' }}
      </el-button>
      <span class="download-all">下载全部</span>
      <div />
    </div>
    <!-- 图片列表展示 -->
    <div
      class="img-list-wrap"
      title="点击放大查看"
      v-show="phone.records.length"
    >
      <div
        class="img-list-item"
        v-for="item in phone.records"
        :key="item"
      >
        <div class="img-wrap">
          <img
            preview="0"
            :src="item.file"
            alt=""
          >
          <p class="date-info">
            {{ dateFormat(item.createTime) }}
          </p>
        </div>
        <div class="video-path">
          {{ item.file }}
        </div>
      </div>
    </div>
    <div
      class="no-data"
      v-show="!phone.records.length"
    >
      暂无数据
    </div>
    <el-table
      :data="phone.records"
      v-if="false"
      border
      height="calc(100% - 45px)"
      ref="mainTable"
      size="mini"
      class="mainTable"
      @selection-change="handleSelectionChange"
    >
      <el-table-column
        type="selection"
        :selectable="(row) => !!row.file"
        width="55"
      />
      <el-table-column
        label="#"
        show-overflow-tooltip
        type="index"
        width="50"
      />
      <el-table-column
        label="文件路径"
        prop="file"
        show-overflow-tooltip
      />
      <el-table-column
        label="创建时间"
        show-overflow-tooltip
        width="180"
      >
        <template slot-scope="scope">
          <span>{{ dateFormat(scope.row.createTime) }}</span>
        </template>
      </el-table-column>
      <el-table-column
        fixed="right"
        label="操作"
        width="100"
      >
        <template slot-scope="scope">
          <el-button
            @click="lookItem(scope.row)"
            size="small"
            style="color:green;"
            type="text"
          >
            查看
          </el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
// import { Handle } from '@/store/modules/handle/mixins'
import convert from '@/utils/convert'
// import { BatchFile } from '@/facade/download'
export default {
  data(){
    return{
      selectionList: [],
      batchFile: '',
    }
  },
  methods: {
    lookItem(){
      this.$emit('look-item',{ row, type: 'img' })
    },
    dateFormat(value,format) {
      return convert.dateFormat(new Date(value), format)
    },
    download(){
        if (this.selectionList.length <= 0) {
          this.$message.warning('请选择要下载的数据！')
          return false
        }
        const params = this.selectionList.map((item) => {
          return {
            name: `${item.name}-${item.time}`,
            url: item.file,
            suffix: 'jpg'
          }
        })
        this.batchFile.addBatch(params)
    },
     handleSelectionChange(val) {
        this.selectionList = val
      }
  },
}
</script>

<style scoped>
.mainTable {
  height: 100%!important;
  overflow-y: scroll;
}
.download-all{
  margin-left:10px;
  font-size:12px;
  text-decoration: underline;
  color:#0091FF;
  cursor:pointer;

}
 .download-all:hover{
    color:#11A2FF;
  }
.img-list-wrap{
  padding:10px 16px;
 
}
.img-list-wrap .img-list-item{
    width:223px;
    box-sizing:border-box;
    cursor:pointer;
    float:left;
    margin-bottom:15px;
    margin-right:15px;

  }
  .img-list-wrap .img-list-item:hover .video-path{
    color:#FFF;
    background:#0091FF;
  }
  .img-list-wrap .img-list-item:hover  .img-wrap{
    border:1px solid #0091FF;
  }
  .img-list-wrap .img-list-item:hover  .img-wra  img{
      transform:scale(1.2);
      transform-origin: center;
  }
    .img-wrap{
      width:223px;
      height:126px;
      background:#000;
      position:relative;
      overflow:hidden;
      border:1px solid transparent;
    }
    .img-wrap  p{
      position:absolute;
      left:0;
      right:0;
      bottom:0;
      height:26px;
      line-height:26px;
      font-size:12px;
      padding-left:10px;
      color:#FFF;
    }
  .img-wrap  img{
      vertical-align: middle;
      width:100%;
      height:100%;
      transition:all 0.2s;
    }
    .video-path{
      padding:10px;
      line-height:16px;
      font-size:12px;
      color:#323232;
      background:#E5E5E5;
      word-break: break-all;
    }
.no-data{
  height:200px;
  border:1px solid #eee;
  line-height:200px;
  text-align:center;
  margin:10px 16px 0;
  font-size:14px;
}
</style>
